<template>
  <div class="layout-header">
    <div class="layout-header__content">
      <section class="top">
        <span>客服热线：0371-60266022（服务时间：9：00~17：00）</span>
        <span>
          <span v-if="user">
            你好，
            <a class="username"> {{user.nickname}} </a>
            <a @click="onLogout"> 退出登录 </a>
            <el-badge :value="$store.state.unreadNum || undefined">
              <a @click="onMessage"><i class="el-icon-message"></i>我的私信 </a>
            </el-badge>
          </span>
          <span v-else>
            <router-link to="/login"> 登录 </router-link>
            <router-link to="/login"> 免费注册 </router-link>
          </span>
          <a> 新手上路 </a>
          <a>常见问题</a>
        </span>
      </section>
    </div>
  </div>
</template>
<script>
  import { doLogout, doVerifyUser } from '@/apis/user';
  import ZZToast from '@/utils/toast';
  import { doMessage } from '@/utils/message';

  export default {
    name: 'LayoutHeader',
    data() {
      return {
        user: undefined
      };
    },
    methods: {
      onMessage() {
        doMessage(this);
      },
      async onLogout() {
        const res = await doLogout();
        if (res.code === 200) {
          this.cache.clearToken();
          this.cache.clearUser();
          this.$router.push({ name: 'login' });
        } else {
          ZZToast.warn(res.message);
        }
      }
    },
    async created() {
      const token = this.cache.fetchToken();
      if (!token) return;
      const ret = await doVerifyUser(token);
      if (!ret) return;
      this.user = this.cache.fetchUser();
    }
  };
</script>
<style lang="scss" type="text/scss" scoped>
.layout-header {
  background: #dfe0e1;
  &__content {
    @include appW();
  }
}

.top {
  padding: 12px 0;
  font-size: 12px;
  @include h-btw();
  color: #959595;
  span {
    list-style: none;
    display: flex;
    a {
      margin-right: 8px;
      color: #7c7373;

    }
  }

  .username {
    color: #f15a23;
  }
}
</style>
